<template>
	<van-field :value="value" :name="name" :label="label" :size="size" :type="type" :fixed="fixed" :focus="focus" :border="border" :readonly="readonly" :disabled="disabled" :clearable="clearable"
		:clickable="clickable" :required="required" :center="center" :password="password" :title-width="titleWidth" :maxlength="maxlength" :placeholder="placeholder"
		:placeholder-style="placeholderStyle" :custom-style="customStyle" :is-link="isLink" :arrow-direction="arrowDirection" :show-word-limit="showWordLimit" :error="error"
		:error-message="errorMessage" :error-message-align="errorMessageAlign" :input-align="inputAlign" :autosize="autosize" :left-icon="leftIcon" :right-icon="rightIcon" :confirm-type="confirmType"
		:confirm-hold="confirmHold" :hold-keyboard="holdKeyboard" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" :show-confirm-bar="showConfirmBar" :selection-start="selectionStart"
		:selection-end="selectionEnd" :auto-focus="autoFocus" :disable-default-padding="disableDefaultPadding" :cursor="cursor" :clear-trigger="clearTrigger" :always-embed="alwaysEmbed"
		label-class="label-class" input-class="input-class" right-icon-class="right-icon-class" @input="input" @change="change" @confirm="confirm" @click-icon="clickIcon" @focus="onFocus" @blur="blur"
		@clear="clear" @click-input="clickInput" @linechange="linechange" @keyboardheightchange="keyboardheightchange">
		<block #label>
			<slot name="label"></slot>
		</block>
		<block #left-icon>
			<slot name="left-icon"></slot>
		</block>
		<block #right-icon>
			<slot name="right-icon"></slot>
		</block>
		<block slot="button">
			<slot name="button"></slot>
		</block>
		<block #input>
			<slot name="input"></slot>
		</block>
	</van-field>
</template>

<script>
	export default {
		name: "hxt-input",
		options: {
			styleIsolation: 'apply-shared'
		},
		externalClasses: ['input-class', 'right-icon-class', 'label-class'],
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			name: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			fixed: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			focus: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			readonly: {
				type: Boolean,
				default: false
			},
			clearable: {
				type: Boolean,
				default: false
			},
			clickable: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			},
			center: {
				type: Boolean,
				default: false
			},
			password: {
				type: Boolean,
				default: false
			},
			titleWidth: {
				type: String,
				default: '6.2em'
			},
			maxlength: {
				type: Number,
				default: -1
			},
			placeholder: {
				type: String,
				default: ''
			},
			placeholderStyle: {
				type: String,
				default: ''
			},
			customStyle: {
				type: String,
				default: ''
			},
			isLink: {
				type: Boolean,
				default: false
			},
			arrowDirection: {
				type: String,
				default: ''
			},
			showWordLimit: {
				type: Boolean,
				default: false
			},
			error: {
				type: Boolean,
				default: false
			},
			errorMessage: {
				type: String,
				default: ''
			},
			errorMessageAlign: {
				type: String,
				default: ''
			},
			inputAlign: {
				type: String,
				default: 'left'
			},
			autosize: {
				type: [Boolean, Object],
				default: false
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			confirmHold: {
				type: Boolean,
				default: false
			},
			holdKeyboard: {
				type: Boolean,
				default: false
			},
			cursorSpacing: {
				type: Number,
				default: 50
			},
			adjustPosition: {
				type: Boolean,
				default: true
			},
			showConfirmBar: {
				type: Boolean,
				default: true
			},
			selectionStart: {
				type: Number,
				default: -1
			},
			selectionEnd: {
				type: Number,
				default: -1
			},
			autoFocus: {
				type: Boolean,
				default: false
			},
			disableDefaultPadding: {
				type: Boolean,
				default: true
			},
			cursor: {
				type: Number,
				default: -1
			},
			clearTrigger: {
				type: String,
				default: 'focus'
			},
			alwaysEmbed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			input: function(e) {
				this.$emit('input', e.detail);
			},
			change: function(e) {
				this.$emit('input', e.detail);
				this.$emit('change', e.detail);
			},
			confirm: function(e) {
				this.$emit('confirm', e.detail);
			},
			clickIcon: function() {
				this.$emit('click-icon');
			},
			onFocus: function(e) {
				this.$emit('focus', e);
			},
			blur: function(e) {
				this.$emit('blur', e);
			},
			clear: function() {
				this.$emit('clear');
			},
			clickInput: function() {
				this.$emit('click-input');
			},
			linechange: function(e) {
				this.$emit('linechange', e);
			},
			keyboardheightchange: function(e) {
				this.$emit('keyboardheightchange', e);
			}
		}
	}
</script>

<style>

</style>
